<template>
  <div
  v-show="isShow"
    class="draggable-box"
    :style="{ top: posY + 'px', left: posX + 'px', width: width + 'px', height: height + 'px' }"
    @mousedown="startDrag"
    @touchstart.prevent="startDragTouch"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      posX: 0,
      posY: 0,
      startX: 0,
      startY: 0,
      maxX: 0, // 最大X轴拖动距离
      maxY: 0, // 最大Y轴拖动距离
      isShow: false,
      startDate: null,
      endDate:null
    };
  },
  emits: ["handleClick"],
  props:{
    width:{
      type:Number,
      default:300
    },
    height:{
      type:Number,
      default:300
    },
    initBottom:{
      type:Number,
      default: 150

    },
    initRight:{
      type:Number,
      default: 76

    }
  },
  mounted() {
    this.maxX = window.innerWidth - this.$props.width;
    this.maxY = window.innerHeight - 150;
    this.posX = window.innerWidth - this.$el.clientWidth - this.$props.initRight;
    this.posY = window.innerHeight - this.$el.clientHeight - this.$props.initBottom;
    this.$nextTick(() => {
      this.isShow = true;
    });
  },
  methods: {
    startDrag(event) {
      this.startDate = new Date().getTime();
      event.preventDefault();
  event.stopPropagation(); // 阻止事件传播
      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      document.addEventListener("mousemove", this.drag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    drag(event) {
      if (this.isDragging) {
        let deltaX = event.clientX - this.startX;
        let deltaY = event.clientY - this.startY;
        let newX = this.posX + deltaX;
        let newY = this.posY + deltaY;

        // 限制在容器内部移动
        if (newX < 0) {
          newX = 0;
        } else if (newX > this.maxX) {
          newX = this.maxX;
        }

        if (newY < 0) {
          newY = 0;
        } else if (newY > this.maxY) {
          newY = this.maxY;
        }

        this.posX = newX;
        this.posY = newY;

        this.startX = event.clientX;
        this.startY = event.clientY;
      }
    },
    stopDrag() {
      this.endDate = new Date().getTime();
      let time = this.endDate - this.startDate;
      if(time<300){
        this.$emit("handleClick");
      }
      this.isDragging = false;
      document.removeEventListener("mousemove", this.drag);
      document.removeEventListener("mouseup", this.stopDrag);
    },
    startDragTouch(event) {
      this.startDate = new Date().getTime();
      event.preventDefault();
  event.stopPropagation(); // 阻止事件传播
      this.isDragging = true;
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      document.addEventListener("touchmove", this.dragTouch, {
        passive: false,
      });
      document.addEventListener("touchend", this.stopDragTouch);
    },
    dragTouch(event) {
      if (this.isDragging) {
        let deltaX = event.touches[0].clientX - this.startX;
        let deltaY = event.touches[0].clientY - this.startY;
        let newX = this.posX + deltaX;
        let newY = this.posY + deltaY;

        // 限制在容器内部移动
        if (newX < 0) {
          newX = 0;
        } else if (newX > this.maxX) {
          newX = this.maxX;
        }

        if (newY < 0) {
          newY = 0;
        } else if (newY > this.maxY) {
          newY = this.maxY;
        }

        this.posX = newX;
        this.posY = newY;

        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
      }
    },
    stopDragTouch() {
      this.endDate = new Date().getTime();
      let time = this.endDate - this.startDate;
      if(time<300){
        this.$emit("handleClick");
      }
      this.isDragging = false;
      document.removeEventListener("touchmove", this.dragTouch);
      document.removeEventListener("touchend", this.stopDragTouch);
    },
  },
};
</script>

<style scoped>
.draggable-box {
  position: absolute;
  bottom: 27px;
  right: 16px;
  cursor: move;
  z-index: 9;
}
</style>
